<template>
    <div class="app-container">
        <el-tabs v-model="activeName" :stretch="true" @tab-click="handleClick">
            <el-tab-pane label="药品总库存" name="medicinesTab">
                <!-- 查询条件开始 -->
                <el-form ref="queryForm" :model="queryParams" :inline="true" label-width="68px">
                    <el-form-item label="药品名称" prop="medicinesName">
                        <el-input
                                v-model="queryParams.medicinesName"
                                placeholder="请输入药品名称"
                                clearable
                                size="small"
                                style="width:180px"/>
                    </el-form-item>
                    <el-form-item label="关键字" prop="keywords">
                        <el-input
                                v-model="queryParams.keywords"
                                placeholder="请输入关键字"
                                clearable
                                size="small"
                                style="width:180px"/>
                    </el-form-item>
                    <el-form-item label="药品类型" prop="medicinesType">
                        <el-select
                                v-model="queryParams.medicinesType"
                                placeholder="药品类型"
                                clearable
                                size="small"
                                style="width:180px">
                            <el-option
                                    v-for="dict in medicinesTypeOptions"
                                    :key="dict.dictValue"
                                    :label="dict.dictLabel"
                                    :value="dict.dictValue"/>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="生产厂家" prop="producterId">
                        <el-select
                                v-model="queryParams.producterId"
                                placeholder="生产厂家"
                                clearable
                                size="small"
                                style="width:180px">
                            <el-option
                                    v-for="dict in producterOptions"
                                    :key="dict.producerId"
                                    :label="dict.producerName"
                                    :value="dict.producerId"/>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="处方类型" prop="prescriptionType">
                        <el-select
                                v-model="queryParams.prescriptionType"
                                placeholder="处方类型"
                                clearable
                                size="small"
                                style="width:180px">
                            <el-option
                                    v-for="dict in prescriptionTypeOptions"
                                    :key="dict.dictValue"
                                    :label="dict.dictLabel"
                                    :value="dict.dictValue"/>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="创建时间">
                        <el-date-picker
                                v-model="queryParams.dateRange"
                                size="small"
                                style="width:240px"
                                value-format="yyyy-MM-dd"
                                type="daterange"
                                range-separator="-"
                                start-placeholde="开始日期"
                                end-placeholde="结束日期"/>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                        <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-form>
                <!-- 查询条件结束 -->
                <!-- 数据表格开始 -->
                <el-table border :data="medicinesTableList">
                    <el-table-column label="药品ID" align="center" prop="medicinesId"/>
                    <el-table-column label="药品名称" align="center" prop="medicinesName" />
                    <el-table-column label="药品编号" align="center" prop="medicinesNumber" />
                    <el-table-column label="生产厂家" width="280px" align="center" prop="producterId" :formatter=" producterFormatter" />
                    <el-table-column label="药品类型" align="center" prop="medicinesType" :formatter="medicinesTypeFormatter" />
                    <el-table-column label="处方类型" align="center" prop="prescriptionType" :formatter="prescriptionTypeFormatter" />
                    <el-table-column label="关键字" align="center" prop="keywords" />
                    <el-table-column label="库存量" align="center" prop="medicinesStockNum" />
                    <el-table-column label="预警值" align="center" prop="medicinesStockDangerNum" />
                    <el-table-column label="状态" prop="status" align="center" :formatter="statusformat2"/>
                </el-table>
                <!-- 数据表格结束 -->
                <!-- 分页控件开始 -->
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="page1.current"
                        :page-sizes="[5, 10, 15, 20]"
                        :page-size="page1.seze"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="page1.total">
                </el-pagination>
                <!-- 分页控件结束 -->
            </el-tab-pane>
            <el-tab-pane label="批次库存及价格" name="inventoryLogTab">
                <!-- 查询条件开始 -->
                <el-form ref="queryLogForm" :model="queryLogParams" :inline="true" label-width="88px">
                    <el-form-item label="采购单据号" prop="purchaseId">
                        <el-input
                                v-model="queryLogParams.purchaseId"
                                placeholder="采购单据号"
                                clearable
                                size="small"
                                style="width:180px"/>
                    </el-form-item>
                    <el-form-item label="药品名称" prop="medicinesName">
                        <el-input
                                v-model="queryLogParams.medicinesName"
                                placeholder="请输入药品名称"
                                clearable
                                size="small"
                                style="width:180px"/>
                    </el-form-item>
                    <el-form-item label="药品类型" prop="medicinesType">
                        <el-select
                                v-model="queryLogParams.medicinesType"
                                placeholder="药品类型"
                                clearable
                                size="small"
                                style="width:180px">
                            <el-option
                                    v-for="dict in medicinesTypeOptions"
                                    :key="dict.dictValue"
                                    :label="dict.dictLabel"
                                    :value="dict.dictValue"/>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="生产厂家" prop="producterId">
                        <el-select
                                v-model="queryLogParams.producterId"
                                placeholder="生产厂家"
                                clearable
                                size="small"
                                style="width:180px">
                            <el-option
                                    v-for="dict in producterOptions"
                                    :key="dict.producerId"
                                    :label="dict.producerName"
                                    :value="dict.producerId"/>/>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="处方类型" prop="prescriptionType">
                        <el-select
                                v-model="queryLogParams.prescriptionType"
                                placeholder="处方类型"
                                clearable
                                size="small"
                                style="width:180px">
                            <el-option
                                    v-for="dict in prescriptionTypeOptions"
                                    :key="dict.dictValue"
                                    :label="dict.dictLabel"
                                    :value="dict.dictValue"/>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="创建时间">
                        <el-date-picker
                                v-model="queryLogParams.dateRange"
                                size="small"
                                style="width:240px"
                                value-format="yyyy-MM-dd"
                                type="daterange"
                                range-separator="-"
                                start-placeholde="开始日期"
                                end-placeholde="结束日期"/>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                        <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-form>
                <!-- 查询条件结束 -->
                <!-- 数据表格开始 -->
                <el-table v-loading="loading" border :data="inventoryLogTableList">
                    <el-table-column type="expand">
                        <template slot-scope="props">
                            <el-form label-position="left" inline class="demo-table-expand">
                                <el-form-item label="入库号">
                                    <span>{{ props.row.inventoryLogId }}</span>
                                </el-form-item>
                                <el-form-item label="单据号">
                                    <span>{{ props.row.purchaseId }}</span>
                                </el-form-item>
                                <el-form-item label="规格">
                                    <span>{{ props.row.conversion }}{{ props.row.unit }}</span>
                                </el-form-item>
                            </el-form>
                        </template>
                    </el-table-column>
                    <el-table-column label="药品ID" align="center" prop="medicinesId" />
                    <el-table-column label="药品名称" align="center" prop="medicinesName" />
                    <el-table-column label="采购量" align="center" prop="inventoryLogNum" />
                    <el-table-column label="批发价" align="center" prop="tradePrice">
                        <template slot-scope="scope">
                            <span>{{ scope.row.tradePrice|rounding }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="批发额" align="center" prop="tradeTotalAmount">
                        <template slot-scope="scope">
                            <span>{{ scope.row.tradeTotalAmount|rounding }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="批次号" align="center" prop="batchNumber" />
                    <el-table-column label="生产厂家" width="280px" align="center" prop="producterId" :formatter="producterFormatter" />
                    <el-table-column label="药品类型" align="center" prop="medicinesType" :formatter="medicinesTypeFormatter" />
                    <el-table-column label="处方类型" align="center" prop="prescriptionType" :formatter="prescriptionTypeFormatter" />
                    <el-table-column label="入库时间" width="180px" align="center" prop="createTime" />
                </el-table>
                <!-- 数据表格结束 -->
                <!-- 分页控件开始 -->
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="page2.current"
                        :page-sizes="[5, 10, 15, 20]"
                        :page-size="page2.size"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="page2.total">
                </el-pagination>
                <!-- 分页控件结束 -->
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
    // 引入api
import qs from 'qs'
    export default {
        filters: {
            rounding(value) {
                return value.toFixed(2)
            }
        },
        // 定义页面数据
        data() {
            return {
                page1:{
                    total:10,
                    current:1,
                    size:10
                },
                page2:{
                    total:10,
                    current:1,
                    size:10
                },
                //第一张表
                medicinesTableList:[],
                // 当前激活的tab
                activeName: 'medicinesTab',
                // 是否启用遮罩层
                loading: false,
                // 药品分页数据总条数
                total: 0,
                // 入库分页数据总条数
                totalLog: 0,
                // 字典表格数据
                roleTableList: [],
                // 字典表格数据 第二张表
                inventoryLogTableList: [],
                // 状态数据字典
                statusOptions: [],
                // 药品类型数据字典
                medicinesTypeOptions: [],
                // 生产厂家数据
                producterOptions: [],
                // 处方类型数字典
                prescriptionTypeOptions: [],
                // 药品查询参数
                queryParams: {},
                // 入库详情查询参数
                queryLogParams: {},
                dateRange: []
            }
        },
        // 方法
        methods: {
            // 点击tab调用的事件
            handleClick(tab, event) {
                console.log(this.activeName)
                if (this.activeName === 'medicinesTab') {
                    this.initRoleTable();
                } else if (this.activeName === 'inventoryLogTab') {
                    this.getInventoryLogList()
                }
            },
            //状态字典解析
            statusformat2(row){
                let val=row.status ;
                return this.formatDict(this.statusOptions,val)
            },
            //状态
            initStatus2(){
                this.$axios.get("system/api/dict/data/findByType/sys_normal_disable").then(r=>{
                    this.statusOptions = r.data.t;
                })
            },
            //生产厂家下拉框
            getAll1(){
                this.$axios.get("medicine/Inventory/getAll1").then(r=>{
                    this.producterOptions=r.data.t;
                })
            },
            //处方类型字典解析
            statusformat(row){
                let val=row.medicinesType ;
                return this.formatDict(this.statusOptions,val)
            },
            //处方类型
            initStatus1(){
                this.$axios.get("system/api/dict/data/findByType/his_prescription_type").then(r=>{
                    this.prescriptionTypeOptions = r.data.t;
                })
            },
            //药品类型字典解析
            statusformat(row){
                let val=row.medicinesType ;
                return this.formatDict(this.statusOptions,val)
            },
            //药品类型
            initStatus(){
                this.$axios.get("system/api/dict/data/findByType/his_medicines_type").then(r=>{
                    this.medicinesTypeOptions = r.data.t;
                })
            },
            // //分页
            // handleSizeChange(val) {
            //     this.page.size=val;
            //     this.initRoleTable();
            // },
            // handleCurrentChange(val) {
            //     this.page.current=val;
            //     this.initRoleTable();
            // },
            // 查询药品表格数据
            initRoleTable(){
                let search={...this.page1,...this.queryParams};
                this.$axios.post("/medicine/Inventory/getAll2/",search).then(result=>{
                    this.medicinesTableList=result.data.t.records;
                    this.page1.total=result.data.t.total;
                })
            },
            // 查询入库记录表格数据
            getInventoryLogList() {
                let search={...this.page2,...this.queryLogParams};
                this.$axios.post("/medicine/Inventory/getAll/",qs.stringify(search)).then(res => {
                    this.inventoryLogTableList = res.data.t.records;
                    this.page2.total = res.data.t.total;
                })
            },
            // 药品条件查询
            handleQuery() {
                if (this.activeName === 'medicinesTab') {
                    this.initRoleTable();
                } else if (this.activeName === 'inventoryLogTab') {
                    this.getInventoryLogList()
                }
            },
            // 药品重置查询条件
            resetQuery() {
                if (this.activeName === 'medicinesTab') {
                    this.queryParams={};
                    this.initRoleTable();
                } else if (this.activeName === 'inventoryLogTab') {
                    this.queryLogParams={};
                    this.getInventoryLogList();
                }
            },
            // 分页pageSize变化时触发
            handleSizeChange(val) {
                if (this.activeName === 'medicinesTab') {
                    this.page1.size = val
                    this.initRoleTable();
                } else if (this.activeName === 'inventoryLogTab') {
                    this.page2.size = val
                    this.getInventoryLogList()
                }
            },
            // 点击上一页  下一页，跳转到哪一页面时触发
            handleCurrentChange(val) {
                if (this.activeName === 'medicinesTab') {
                    this.page1.current = val
                    this.initRoleTable();
                } else if (this.activeName === 'inventoryLogTab') {
                    this.page2.current = val
                    this.getInventoryLogList()
                }
            },
            // 翻译状态
            statusFormatter(row) {
                return this.formatDict(this.statusOptions, row.status)
            },
            // 翻译生产厂家
            producterFormatter(row) {
                let val=row.producterId;
                for(let i=0;i<this.producterOptions.length;i++){
                    if(this.producterOptions[i].producerId==val){
                        return this.producterOptions[i].producerName;
                    }
                }
                return "";
                return this.formatDict(this.producterOptions, row.producterId)
            },
            // 翻译药品类型
            medicinesTypeFormatter(row) {
                return this.formatDict(this.medicinesTypeOptions, row.medicinesType)
            },
            // 翻译处方类型
            prescriptionTypeFormatter(row) {
                return this.formatDict(this.prescriptionTypeOptions, row.prescriptionType)
            }
        },
        created() {
            this.initRoleTable();
            this.getAll1();
            this.initStatus();
            this.initStatus1();
            this.initStatus2();
        },
    }
</script>
<style scoped>
    .demo-table-expand {
        font-size: 0;
    }
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
</style>

